<template>
  <div class="content-div">
    <div class="item-title">
      <span>体检报告</span>
    </div>
    <div class="card-img" v-for="(item, index) in formItem.medical_report_arr" v-bind:key="index">
      <img :src="item" alt="">
    </div>
    <div class="gn-btn-box">
      <van-uploader :after-read="afterRead" :deletable="false">
        <div class="gn-btn"  @click="saveImg()">修改/上传</div>
      </van-uploader>
    </div>
  </div>
</template>
<script>
import { Toast } from 'vant'
import { getQualification, saveAccompanyingPhysician } from '@/api/medicalWaiter.js'
import { getSignToHadoop, uploadFilesToHadoop } from '@/api/medical.js'
export default {
  name: 'medicalReport',
  data () {
    return {
      formItem: {}
    }
  },
  computed: {
    accompanying_physician_id () {
      return this.$store.state.user.severUserInfo.accompanying_physician_id
    },
    province_code () {
      return this.$store.state.app.city.province_code
    },
    city_code () {
      return this.$store.state.app.city.city_code
    }
  },
  methods: {
    getQualificationInfo () {
      getQualification({ accompanying_physician_id: this.accompanying_physician_id }).then(res => {
        if (res.data.errcode === 0) {
          this.formItem = res.data.data
          this.formItem.medical_report_arr = res.data.data.medical_report.split(',')
          return
        }
        Toast.fail(res.data.errmsg)
      })
    },
    afterRead (file) {
      let index = file.content.indexOf('base64,') + 7
      let time = new Date().getTime().toString()
      let fileData = {
        fileName: time + '-' + file.file.name,
        filePath: 'mobile',
        file: file.content.substring(index)
      }
      file.status = 'uploading'
      file.message = '上传中...'
      getSignToHadoop({
        filePath: fileData.filePath,
        fileName: fileData.fileName,
        timestamp: time
      }).then(res => {
        if (res.data.errcode === 0) {
          uploadFilesToHadoop(res.data.data.docking_url, {
            sign: res.data.data.sign,
            timestamp: time,
            filePath: fileData.filePath,
            fileName: fileData.fileName,
            file: fileData.file
          }).then(ret => {
            if (ret.data.errcode === 0) {
              file.status = 'success'
              file.message = '上传成功'
              this.formItem.medical_report = ret.data.data
              this.authentication()
              // this.formItem.qualification = ret.data.data
              // this.fileList = [{
              //   url: ret.data.data
              // }]
            }
          })
        }
      })
    },
    authentication () { // 上传完图片直接调用认证接口
      this.formItem.city = this.city_code
      this.formItem.province = this.province_code
      saveAccompanyingPhysician(this.formItem).then(res => {
        if (res.data.errcode === 0) {
          Toast.success('保存成功')
          setTimeout(() => {
            this.getQualificationInfo()
          }, 1000)
          return
        }
        Toast.fail(res.data.errmsg)
      })
    }
  },
  mounted () {
    this.getQualificationInfo()
  }
}
</script>
<style scoped lang="less">
  .content-div {
    padding: 8px;
    .item-title {
      margin-left: 8px;
      margin-bottom: 5px;
      height: 17px;
      position: relative;
    }
    .item-title::before {
      position: absolute;
      left: -10px;
      width: 3px;
      height: 10px;
      background-color: #1989fa;
      top: 40%;
      content: ' ';
    }
    .card-img {
      padding: 8px;
      height: auto;
      img {
        width: 100%;
      }
    }
    .gn-btn-box{
      height: 58px;
      position: fixed;
      // bottom: 50px; // 不显示底部tabbar暂时注释掉，需要的时候解开即可
      bottom: 0px;
      left: 0;
      background-color: #FFFFFF;
      width: 100%;
      box-sizing: border-box;
      padding: 10px;
      box-shadow: 0 0 10px 0 #CCCCCC;
      .van-uploader {
        width: 100%;
      }
      /deep/.van-uploader__input-wrapper {
        width: 100%;
      }
      .gn-btn{
        height: 38px;
        line-height: 38px;
        text-align: center;
        background-color: rgba(89,89,255,.07);
        color: #1989fa;
        border-radius: 6px;
        box-sizing: border-box;
        border: 1px solid #1989fa;
      }
    }
    .flex {
      display: flex;
      flex-direction: row;
      align-items: center;
    }
    .flex1 {
      display: flex;
      justify-content: flex-end;
      flex-direction: row;
      // align-items: center;
    }
    .row-center {
      justify-content: center;
    }
    .row-between {
      justify-content: space-between;
    }
  }
</style>
